<template>
	<el-container>
		<el-aside width="540px">
			<img src="../../../../assets/third/test_01.png" frameborder="0" width="540"></img>
		</el-aside>
		<el-main style="position: relative;">
			<div class="x-header">
				<span>审查意见录入</span>
				<span><el-button type="primary" size="small" @click="handleAddComment" :disabled="isAdd">新增</el-button></span>
			</div>
			<div class="x-list">
				<component :is="currentComponent" @handleCancel="handleCancel"></component>
			</div>
		</el-main>
	</el-container>
</template>

<script>
	import list from "./list"
	import add from "./add"
	export default {
		data(){
			return {
				currentComponent:list,
				isAdd:false
			}
		},
		methods:{
			handleAddComment:function () {
				this.currentComponent = add;
				this.isAdd = true;
			},
			handleCancel:function () {
				this.currentComponent = list;
				this.isAdd = false;
			}
		}
	}
	
</script>

<style scoped lang="scss">
	.x-header{
		padding:20px 30px;
		display: flex;
		justify-content: space-between;
		align-items:center;
		border-bottom: 1px solid rgba(242,242,242,1);
		span:first-child{
			font-size:18px;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(77,77,77,1);
		}
	}
	.x-list{
		
	}
</style>
